<script setup>
import router from "../../../../router";
import MyNav from "../../../../components/MyNav.vue";
import MyForm from "../../../../components/MyForm.vue";
import {MINIO_COURSE_COVER, RULE} from "../../../../const";
import {reactive, ref} from "vue";
import {insertApi} from "../../../../api/axios.js";


/* ==================== 页面常量 ==================== */

// 路径导航
const navItems = [
  {icon: 'User', label: '订单管理'},
  {icon: 'Flag', label: '订单列表', url: '/Order'},
  {icon: 'Flag', label: '订单明细列表', url: '/OrderDetail'},
  {icon: 'Plus', label: '添加订单明细'},
];

/* ==================== 添加表单 ==================== */

// 表单项 + 表单值 + 表单规则
let items = ref([
  { label: '订单ID', prop: 'fkOrderId', required: true,  width: 130, sortable: false },
  { label: '课程ID',prop:'fkCourseId',required: true, width:80},

]);
let data = reactive({info: '暂无描述'});
let rules = {
  info: RULE.INFO
};

/**
 * 添加成功后调用
 *
 * 1. 路由到 SubMenu 页面
 */
function insertSuccess() {
  router.push('/OrderDetail');
}
</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <el-card class="orderDetail-insert-card" header="添加订单明细">
    <my-form type="insert"
             :items="items"
             :rules="rules"
             :args="{module: 'orderDetail'}"
             :api="insertApi"
             :params="data"
             :callback="insertSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.orderDetail-insert-card {
  width: 70%; // 宽度
  margin: 20px auto 0; // 外边距
}
</style>